<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';

const emit = defineEmits(['myClick']);

const props = defineProps({
  iNow: {
    default: 0
  },
  selectBool: {
    type: Boolean,
    default: true,
  },
  commentObj: {
    type: Object,
    default: {
      total: 0,
      level5: 0,
      level4: 0,
      level3: 0,
      level2: 0,
      level1: 0
    }
  }
});

const currentData = ref<any>({
  type: props.iNow,
});

const selectType = (type:any) => {
  if(props.selectBool) {
    currentData.value.type = type;
    emit("myClick", currentData.value.type)
  }
  
}


</script>
<template>
  <section class="commentTypeUtil">
    <div class="item" @click="selectType(0)" :class="{'active': currentData.type==0}">全部({{props.commentObj.total}})</div>
    <div class="item" @click="selectType(5)" :class="{'active': currentData.type==5}">满意({{props.commentObj.level5}})</div>
    <div class="item" @click="selectType(4)" :class="{'active': currentData.type==4}">较好({{props.commentObj.level4}})</div>
    <div class="item" @click="selectType(3)" :class="{'active': currentData.type==3}">中等({{props.commentObj.level3}})</div>
    <div class="item" @click="selectType(2)" :class="{'active': currentData.type==2}">一般({{props.commentObj.level2}})</div>
    <div class="item" @click="selectType(1)" :class="{'active': currentData.type==1}">差评({{props.commentObj.level1}})</div>
  </section>
</template>

<style lang="less" scoped>
.commentTypeUtil {
  padding: .1rem;
  display: flex;
  background: white;
  .item {
    height: .25rem;
    line-height: .25rem;
    text-align: center;
    font-size: .1rem;
    color: #666;
    padding: 0 .05rem;
    background: #fdf0f0;
    border-radius: .03rem;
    margin-right: .1rem;
    &.active {
      color: #fff;
      background: #e93b3d;
    }
  }
}
</style>
